<template>
  <div>
    <div class="board">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>角色管理</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="bill-management-container">
      <div style='padding:8px 0px'>
        <el-row :gutter="24">
          <el-col :span="4">
            <el-input v-model="pageData.searchText" placeholder="搜索角色" autocomplete="off" />
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click='handerSearch'>查询</el-button>
          </el-col>
          <el-col :span="2">
            <el-button type="success" @click='addDialogVisible=true'>新增</el-button>
          </el-col>
        </el-row>
      </div>
      <el-table :data="pageData.records" style="width: 100%" :header-cell-style="{background: '#800000'}">
        <el-table-column prop="roleId" label="ID" width="100" header-align="center" align="center" />
        <el-table-column prop="roleName" label="角色名称" width="200" header-align="center" align="center" />
        <el-table-column prop="roleDesc" label="描述" header-align="center" align="center" />

        <el-table-column label="操作" header-align="center" align="center" width="200">
          <template #default="scope">
            <el-button size="small" type="primary" plain @click="handleEdit(scope.$index, scope.row)">
              编辑
            </el-button>
            <el-button
                size="small"
                plain
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination
            v-model:current-page="pageData.current"
            v-model:page-size="pageData.size"
            :page-sizes="[10, 20, 30, 40]"
            :size="pageData.size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pageData.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>

      <!--新增角色对话框-->
      <el-dialog v-model="addDialogVisible" title="新增角色" width="500">
        <el-form :model="addObj">
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="addObj.roleName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="addObj.roleDescription" autocomplete="off" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handlerAddCancel">取消</el-button>
            <el-button type="primary" @click="handlerAdd">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!--编辑角色对话框-->
      <el-dialog v-model="editDialogVisible" title="编辑角色" width="500">
        <el-form :model="editObj">
          <el-form-item label="角色名称" :label-width="formLabelWidth">
            <el-input v-model="editObj.roleName" autocomplete="off" />
          </el-form-item>
          <el-form-item label="角色描述" :label-width="formLabelWidth">
            <el-input v-model="editObj.roleDescription" autocomplete="off" type="textarea" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="handlerEditCancel">取消</el-button>
            <el-button type="primary" @click="handlerEditCommit">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>

      <!--删除确认对话框-->
      <el-dialog
          v-model="deleteDialogVisible"
          title="删除提示"
          width="500"
      >
        <span>确认要删除这个角色吗？</span>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="deleteDialogVisible = false">取消</el-button>
            <el-button type="primary" @click="confirmDelete">
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {ref, onMounted} from "vue"
import api from '../api'
import lodash from 'lodash'

const pageData = ref({
  records: [],
  total: 0,
  size: 10,
  current: 1,
  pages: 1,
  searchText: ''
})

const formLabelWidth = '120px'
const addDialogVisible = ref(false)
const editDialogVisible = ref(false)
const deleteDialogVisible = ref(false)

const addObj = ref({
  roleName: '',
  roleDescription: ''
})

const editObj = ref({
  roleId: '',
  roleName: '',
  roleDescription: ''
})

const deleteObj = ref({
  roleId: '',
  index: -1
})

// 获取角色列表
const getTableList = async () => {
  const page = {
    current: pageData.value.current,
    size: pageData.value.size,
    searchText: pageData.value.searchText || ''
  }
  const result = await api.getRolePage(page)
  pageData.value = result
}

const handerSearch = () => {
  pageData.value.current = 1
  getTableList()
}

const handlerAddCancel = () => {
  addObj.value.roleName = ''
  addObj.value.roleDescription = ''
  addDialogVisible.value = false
}

const handlerAdd = async () => {
  await api.addRole(addObj.value)
  await getTableList()
  addDialogVisible.value = false
}

const handleEdit = (index, row) => {
  editObj.value = lodash.clone(row)
  editDialogVisible.value = true
}

const handlerEditCancel = () => {
  editDialogVisible.value = false
}

const handlerEditCommit = async () => {
  await api.editRole(editObj.value)
  await getTableList()
  editDialogVisible.value = false
}

const handleDelete = (index, row) => {
  deleteObj.value.roleId = row.roleId
  deleteObj.value.index = index
  deleteDialogVisible.value = true
}

const confirmDelete = async () => {
  await api.deleteRole(deleteObj.value.roleId)
  pageData.value.records.splice(deleteObj.value.index, 1)
  await getTableList()
  deleteDialogVisible.value = false
}

const handleSizeChange = (val) => {
  pageData.value.size = val
  getTableList()
}

const handleCurrentChange = (val) => {
  pageData.value.current = val
  getTableList()
}

onMounted(() => {
  getTableList()
})
</script>

<style scoped>
.bill-management-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}
.el-table {
  margin-top: 10px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  border-radius: 8px;
  overflow: hidden;
}
</style>